<template>
  <div class="box-shadow">
    <!-- 语言配置 -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">1. {{ $t("语言配置") }}</div>
        <div class="border-buttom"></div>
        <div class="table_edit" v-if="languageShow">
          <el-button
            style="color: #00d1ff; font-size: 15px; width: 100px"
            type="text"
            icon="el-icon-edit"
            @click="editLanguage"
          >
            {{ $t("编辑") }}
          </el-button>
        </div>
        <div class="table_edit" v-else>
          <el-button
            style="color: #00d1ff; font-size: 15px; width: 100px"
            type="text"
            icon="el-icon-edit"
            @click="submitForm"
          >
            {{ $t("保存") }}
          </el-button>
        </div>
      </div>
      <div class="center">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item
            :label="$t('语言') + '：'"
            prop="radio"
            style="padding: 8px 20px"
          >
            <el-radio-group v-model="ruleForm.configValue">
              <el-radio label="zh_CN">{{ $t("简体中文") }}</el-radio>
              <el-radio label="en_US">{{ $t("英文") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 登录页LOGO -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">2. {{ $t("登录页LOGO") }}</div>
        <div class="border-buttom"></div>
        <div class="table_edit">
          <diV class="right" v-if="logoShow" @click="editLogo">
            <img src="../../../assets/icons/settings/edit.png" alt="" />
            <span>{{ $t("编辑") }}</span>
          </diV>
          <diV class="right" v-else @click="preservation">
            <img src="../../../assets/icons/settings/preservation.png" alt="" />
            <span>{{ $t("保存") }}</span>
          </diV>
          <diV class="right" @click="cancelLogo">
            <img src="../../../assets/icons/settings/x.png" alt="" />
            <span>{{ $t("取消") }}</span>
          </diV>
        </div>
      </div>
      <div class="center">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item
            :label="$t('文件') + '：'"
            prop="radio"
            style="padding: 8px 20px"
          >
            <div class="upload-default-img">
              <div class="upload-default-pic-btns">
                <myUpload
                  class="upload-demo"
                  :uploadFileUrl="uploadFileUrl"
                  :fileListArr="defaultPicture"
                  :fileType="defaultFile"
                  :isShowTip="false"
                  :showFileList="true"
                  :fileSize="5"
                  :limit="1"
                  @input="defaultPicSuccess"
                >
                </myUpload>
              </div>
              <div class="upload-limit" style="margin-left: 16px">
                <p>
                  {{ $t("格式支持") }}
                  <span>jpg</span>、<span>jpeg</span>、<span>png</span>、
                </p>
                <p>
                  {{ $t("尺寸建议为") }} <span>480*46</span>、{{
                    $t("大小不超过")
                  }}<span>5M</span>
                </p>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            :label="$t('位置') + '：'"
            prop="radio"
            style="padding: 8px 20px"
          >
            <el-radio-group v-model="checked">
              <el-radio :label="0">{{ $t("左上角") }}</el-radio>
              <el-radio :label="1">{{ $t("系统名称上方") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 登录验证码 -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">1. {{ $t("登录验证码") }}</div>
        <div class="border-buttom"></div>
        <div class="table_edit" v-if="isShowVerifCode">
          <el-button
            style="color: #00d1ff; font-size: 15px; width: 100px"
            type="text"
            icon="el-icon-edit"
            @click="editVerifCode"
          >
            {{ $t("编辑") }}
          </el-button>
        </div>
        <div class="table_edit" v-else>
          <el-button
            style="color: #00d1ff; font-size: 15px; width: 100px"
            type="text"
            icon="el-icon-edit"
            @click="changeVerifCode"
          >
            {{ $t("保存") }}
          </el-button>
        </div>
      </div>
      <div class="center">
        <el-form
          :model="verifCodeForm"
          :rules="verifCodeRules"
          ref="verifCodeRef"
        >
          <el-form-item
            :label="$t('是否启用') + '：'"
            prop="radio"
            style="padding: 8px 20px"
          >
            <el-radio-group v-model="verifCodeForm.configValue">
              <el-radio label="true">{{ $t("启用") }}</el-radio>
              <el-radio label="false">{{ $t("不启用") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import myUpload from "./myUpload/index.vue";
import { API_configEdits, updateMap } from "../../../api/system/config";
export default {
  data() {
    return {
      uploadFileUrl:
        window.location.protocol +
        "//" +
        window.location.host +
        "/prod-api/common/upload",
      // uploadFileUrl: "http://172.17.10.242:8080/common/upload",
      languageShow: true, //语言按钮
      isShowVerifCode: true, //验证码
      logoShow: true, //logo按钮
      ruleForm: {
        configValue: "",
        configId: "",
        configKey: "language",
        configName: "系统语言",
      },
      pagelist: {
        configName: "系统语言",
        configKey: "language",
        configValue: "",
      },
      rules: {
        configValue: [
          { required: true, message: "请选择语言", trigger: "change" },
        ],
      },
      fileConfigId: "", //图片id
      fileConfigKey: "", //图片key
      logoPositionConfigId: "", //位置id
      positionConfigKey: "", //位置key
      verifCodeId: "", //验证码id
      verifCodeConfigKey: "", //验证码key
      verifCodeForm: {
        configValue: "",
      },
      verifCodeRules: {},
      defaultFile: ["jpg", "jpeg", "png"], //默认图片类型
      defaultPicture: [], //默认图
      checked: "", //图片位置
      imgUrl: "", //上传成功的img
      imgName: "", //拼接路径
    };
  },
  computed: {
    ...mapGetters(["i18ns"]),
    // 初始化数据
  },
  created() {
    /**获取国际化语言 */
    this.getLanguageConfig();
    // 获取系统配置
    this.getUiupdate();
    console.log(this.uploadFileUrl);
  },
  mounted() {},
  methods: {
    //  图片上传成功的回调
    defaultPicSuccess(file) {
      this.imgUrl = file.url;
      this.imgName = file.fileName;
    },
    // 获取系统配置
    getUiupdate() {
      updateMap().then((res) => {
        this.fileConfigId = res.data["login.logo.file"].configId; //文件ID
        this.fileConfigKey = res.data["login.logo.file"].configKey; //文件key
        this.logoPositionConfigId = res.data["login.logo.position"].configId; //位置id
        this.positionConfigKey = res.data["login.logo.file"].configKey; //位置key
        this.checked = res.data["login.logo.position"].configValue * 1;
        this.verifCodeId = res.data["sys.account.captchaOnOff"].configId; //登录验证码id
        this.verifCodeConfigKey =
          res.data["sys.account.captchaOnOff"].configKey;
        this.verifCodeForm.configValue =
          res.data["sys.account.captchaOnOff"].configValue; //登录验证码
      });
    },
    // 保存  登录页Logo
    preservation() {
      // if (this.imgName == "") {
      //   this.$message({
      //     type: "warning",
      //     message: "请选择下方文件",
      //     duration: 5000,
      //   });
      // } else {
      let obj = [
        {
          configId: this.fileConfigId,
          configKey: this.fileConfigKey,
          configValue: this.imgName || "",
        },
        {
          configId: this.logoPositionConfigId,
          configKey: this.positionConfigKey,
          configValue: this.checked,
        },
      ];
      API_configEdits(obj).then((res) => {
        console.log(res);
        this.$message.success(this.$t("保存成功"));
      });
      // }
    },

    // 获取国际化语言
    getLanguageConfig() {
      this.$store.dispatch("GetI18nsLanguage", this.pagelist).then((res) => {
        this.ruleForm.configValue = res.rows[0].configValue;
        this.ruleForm.configId = res.rows[0].configId;
        this.$i18n.locale = res.rows[0].configValue;
      });
    },

    // 语言切换
    async submitForm() {
      await this.$store.dispatch("SetI18nsLanguage", this.ruleForm).then(() => {
        this.$i18n.locale = this.ruleForm.configValue;
        localStorage.setItem("setLanguage", this.ruleForm.configValue);
        this.$router.go(0);
      });
    },
    //验证码 切换
    changeVerifCode() {
      API_configEdits([
        {
          configId: this.verifCodeId,
          configKey: this.verifCodeConfigKey,
          configValue: this.verifCodeForm.configValue,
        },
      ]).then((res) => {
        if (res.code == 200) {
          this.$message.success(this.$t("保存成功"));
        }
      });
    },

    //  编辑  语言
    editLanguage() {
      this.languageShow = false;
    },
    //编辑 登录页LOGO
    editLogo() {
      this.logoShow = false;
    },
    //编辑登录验证码
    editVerifCode() {
      this.isShowVerifCode = false;
    },

    //  取消  登录页LOGO
    cancelLogo() {
      this.logoShow = true;
      this.$message({
        type: "info",
        message: "已取消",
        duration: 2000,
      });
    },
  },
  components: {
    myUpload,
  },
  computed: {
    language() {
      return this.$store.getters.language;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-shadow {
  width: 100%;
  height: 950px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 24px;
  box-sizing: border-box;
}

.upload-limit {
  font-size: 12px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  font-weight: 400;
  color: #bfbfbf;
  line-height: 12px;
  margin-top: -10px;
  span {
    color: rgba(255, 173, 48, 1);
    font-weight: 400;
  }
}
.upload-default-img {
  display: flex;
}
.table_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #00d1ff;
    padding: 24px 0 16px;
  }
  .border-buttom {
    flex: 1;
    border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
  }
  .table_edit {
    display: flex;
    .right {
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgb(0, 209, 255);
      font-size: 15px;
      width: 70px;
      margin: 0px;
      text-align: center;
      line-height: 50px;
      span {
        margin-left: 5px;
      }
    }
  }
}
</style>
